<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入react依赖库,注意顺序,当前版本: v17.0.2 -->
  <!-- <script src="lib/react/react.development.js"></script>
  <script src="lib/react/react-dom.development.js"></script> -->
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <!-- 引入babel库,用于解析jsx语法
    # https://www.babeljs.cn/setup#installation
  -->
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<style >
    .danger{
      color: rgb(55, 0, 255);
    }
    .large{
      font-size: 30px;
    }
</style>
</style>
<body>
  <div id="root"></div>

  <!-- 这里不是原生的javascript语法,而是特殊的jsx(javascript+xml)语法,需要用babel解析. -->
  <script type="text/babel">
 var msg = 'hello,world';
class HelloWorld extends React.Component {
  render(){
    return (
      <div>
        <h2>组件: {this.props.value}</h2>
        {this.props.componentName?<p>{this.props.componentName}</p>:<p>未命名</p>}
      </div>
    )
  }
}
class Demos extends React.Component {
  render(){
    return (
      <div>
        <HelloWorld value={1} componentName="组件1"/>  
        <HelloWorld value={2}/>  
        <HelloWorld value={3}/>  
      </div>
    )
  }
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<Demos />,document.getElementById('root'));
  </script>
</body>

</html>